<template>
  <MainModule>
    <template #header>
      <MyRowForm :gutter="16">
        <MyColFormItem :span="6" :label="TableLabel.Name + ': '">
          <el-input v-model="table.param.Name" :placeholder="'请输入' + TableLabel.Name" clearable></el-input>
        </MyColFormItem>
        <MyColFormItem>
          <template #col>
            <el-button type="success" @click="GetData">查询</el-button>
            <el-button type="warning" @click="Reset">重置</el-button>
            <el-button type="primary" @click="Create">新建</el-button>
            <el-button type="info" @click="BatchCreate">批量新增</el-button>
            <el-upload action="action" accept=".XLSX, .csv" :before-upload="ImportApis"
              class="el-button el-button--primary">
              导入
            </el-upload>
          </template>
        </MyColFormItem>
      </MyRowForm>
    </template>

    <MyTable v-bind="MyTableData" :serial="(table.param.Page - 1) * table.param.PageSize + 1">
      <template #operation="{ row }">
        <el-button type="primary" @click="Edit(row)">编辑</el-button>
        <el-button type="danger" @click="Delete(row)">删除</el-button>
      </template>
    </MyTable>
    <EditingDialog v-model:visible="EditingParam.modal" :editForm="EditingParam.editForm" @submitSuccess="GetData">
    </EditingDialog>
    <BatchInsertDialog v-model:visible="BatchInsertModal" @submitSuccess="GetData"></BatchInsertDialog>

    <template #footer>
      <MyPagination :total="table.total" v-model:currentPage="table.param.Page" v-model:pageSize="table.param.PageSize"
        @change="GetData"></MyPagination>
    </template>
  </MainModule>
</template>

<script lang="ts" setup>
import { reactive, onMounted, onUnmounted, ref } from 'vue';
import { MainModule, MyPagination, MyTable, MyTableType, MyRowForm, MyColFormItem } from "@/components"
import * as types from "./types"
import { ApiApiUrl, ApiApi } from '@/api/permession/api'
import { PaginationParams } from "@/library/common"
import axios from 'axios';
import { TableLabel, columns } from "./ConfigData"
import EditingDialog from './EditingDialog.vue';
import BatchInsertDialog from './BatchInsertDialog.vue';
import { useMainLoading } from "@/hooks/useMainLoading"
import { AbortApi } from "@/library/utils/request";
import MessageUti from "@/library/utils/MessageUti"

const { openMainLoading, closeMainLoading } = useMainLoading()

const param: types.SelectParamsType = { ...PaginationParams }
const table = reactive({
  param: { ...param },
  total: 0
})

// MyTable 配置数据
const MyTableData = reactive<MyTableType>({
  loading: false,
  table: {
    data: []
  },
  columns
})

const GetData = async () => {
  MyTableData.loading = true

  await ApiApi.SelectApis({ ...table.param }).then((res) => {
    MyTableData.table.data = res.Data.Data
    table.total = res.Data.Count

    MyTableData.loading = false
  })
}

const Reset = () => {
  table.param = { ...param }
}

// EditingDialog 需要的参数数据
const EditingParam = reactive<types.EditingDialog>({
  modal: false,
  editForm: {},
})

const Create = () => {
  EditingParam.modal = true
}

const Edit = (row: any) => {
  const { Id, Name, Path, Type, Desc, Enable } = row

  EditingParam.editForm = { Id, Name, Path, Type, Desc, Enable }
  EditingParam.modal = true
}

const Delete = async (row: any) => {
  const action = await MessageUti.confirm("删除", `确认删除接口 ${row.Name}?`)
  if (!action) { return }

  try {
    const { Id, AppId } = row
    await ApiApi.DeleteApi({ Id, AppId })
    Reset()
    GetData();
    MessageUti.showSuccess("删除成功")
  }
  catch (error) { }
};

const BatchInsertModal = ref(false)
const BatchCreate = () => {
  BatchInsertModal.value = true
}

const ImportApis = (file: any) => {
  if (!file) return false
  ChangeFile(file)
}

const ChangeFile = async (file: any) => {
  let formData = new FormData();
  formData.append("file", file);

  axios({
    method: "post",
    url: ApiApiUrl.ImportApis,
    data: formData,
  })
    .then((res: any) => {
      MyTableData.table.data = res.Data.Data
      table.total = res.Data.Count
    })
}

onMounted(async () => {
  openMainLoading()
  await GetData()
  closeMainLoading()
})

onUnmounted(() => {
  AbortApi(ApiApiUrl.SelectApis)
})

</script>

<style lang="scss" scoped></style>